import React, { Component, PropTypes } from 'react';
import {
  StyleSheet,
  View,
  Text, Dimensions,
} from 'react-native';
import {Actions} from "react-native-router-flux";
import { SafeAreaView } from 'react-navigation';
import RNAlibcSdk, {AlibcTradeWebView} from 'react-native-alibc-sdk';
const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

const PARAMS = {
  pid: "mm_108042659_0_0",
  forceH5: true
};

export default class TaoBaoWebBrowser extends Component{
  constructor(props){
    super(props)
  }

  componentDidMount() {
    RNAlibcSdk.init(PARAMS.pid, PARAMS.forceH5, (err) => {
      if (!err)
        console.log("init taobao success")
      else
        console.log(err)
    });

  }

  render(){
    const { title, userId } = this.props
    let params = {
      payload: 'https://oauth.taobao.com/authorize?response_type=code&client_id=24622074&view=wap&redirect_uri=https://tao.vyxjj.com/alicallback?userid=' + userId,
      type: "url",
    }

    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <View style={styles.headerTitle}>
            <Text style={styles.headerTitleText}>{title ? title: ''}</Text>
          </View>
        </View>
        <AlibcTradeWebView style={styles.webView}
                           ref="MyWebView"
                           param={params}
                           onTradeResult={(data)=>{
                             // console.log(data)
                           }}
                           onStateChange={(data)=>{
                             // console.log(data)
                             if(data.canGoBack){
                               Actions.pop({refresh:{refresh:true}, timeout:1})
                             }
                           }}/>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor:'#fff'
  },
  header: {
    height: 40,
    flexDirection: 'row',
    justifyContent: "space-between",
    alignItems: 'center',
    borderBottomWidth: 1,
    backgroundColor:'#fff',
    borderBottomColor:'#eaeaea',
    // marginTop: Platform.OS === 'android' ? 0 : 20,
  },
  headerTitle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerTitleText: {
    fontSize: 16,
    color: '#0A0A0A'
  },
  headerBtn: {
    paddingHorizontal: 8,
  },
  body:{
    flex: 1,
    paddingHorizontal: 10,
    backgroundColor: '#f8f8f8',
  },
  webView:{
    flex:1
  }
})